<script>
  import FormField from '$lib/components/common/FormField.svelte';
  import NumberField from '$lib/components/common/NumberField.svelte';
  import SwitchField from '$lib/components/common/SwitchField.svelte';
  import MultipleField from '$lib/components/common/MultipleField.svelte';
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher();
  
  export let knowledge;
  export let disabled = false;
  
  function handleEdit() {
    dispatch('edit', knowledge);
  }
  
  function handleDelete() {
    dispatch('delete', knowledge);
  }
</script>

<div class="knowledge-item">
  <div class="knowledge-header">
    <h2>{knowledge.name}</h2>
    <div class="header-actions">
      <button class="icon-btn" on:click={handleEdit} aria-label="编辑" {disabled}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
          <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"/>
        </svg>
      </button>
      <button class="icon-btn" on:click={handleDelete} aria-label="删除" {disabled}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
          <path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="config-content">
    <div class="left-panel">
      <div class="section">
        <h3>基本信息</h3>
        
        <FormField 
          label="知识库名称"
          value={knowledge.knowledgeName}
          readonly={true}
        />
        
        <MultipleField 
          label="RAGFlow知识库"
          values={knowledge.ragflowIds}
          readonly={true}
        />
        
        <FormField 
          label="关联搜索词"
          value={knowledge.searchKeyword}
          readonly={true}
        />
        
        <FormField 
          label="API Key 密钥"
          value={knowledge.apiKey}
          readonly={true}
        />
        
        <FormField 
          label="引文URL"
          value={knowledge.citationUrl}
          readonly={true}
        />
      </div>
      
      <div class="section">
        <h3>参数配置</h3>
        
        <div class="param-row">
          <NumberField 
            label="单页最大块数"
            value={knowledge.maxBlocks}
            readonly={true}
          />
          
          <NumberField 
            label="相关性阈值"
            value={knowledge.relevanceThreshold}
            readonly={true}
          />
          
          <NumberField 
            label="权重分排序"
            value={knowledge.weightSort}
            readonly={true}
          />
        </div>
      </div>
    </div>
    
    <div class="right-panel">
      <div class="section">
        <h3>权限配置</h3>
        
        <SwitchField 
          label="三方系统白名单"
          checked={knowledge.thirdPartyWhitelist}
          readonly={true}
        />
        
        <SwitchField 
          label="用户白名单"
          checked={knowledge.userWhitelist}
          readonly={true}
        />
        
        <SwitchField 
          label="部门白名单"
          checked={knowledge.departmentWhitelist}
          readonly={true}
        />
      </div>
    </div>
  </div>
</div>

<style>
  .knowledge-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
  }
  
  .knowledge-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .knowledge-header h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #333;
  }
  
  .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s;
  }
  
  .icon-btn:disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    border-color: #f0f0f0;
  }
  
  .icon-btn:disabled:hover {
    background: #f9f9f9;
    border-color: #f0f0f0;
  }
  
  .icon-btn:hover:not(:disabled) {
    background: #f8f8f8;
    border-color: #ccc;
  }
  
  .config-content {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .left-panel {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .right-panel {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .section {
    margin-bottom: 24px;
  }
  
  .section:last-child {
    margin-bottom: 0;
  }
  
  .section h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px 0;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .param-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  @media (max-width: 768px) {
    .config-content {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    
    .param-row {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
</style>
